<template>
	<view>
		<view class="header">
			<image width="100%" height="100%" class="headbgImage" src="/static//blue.jpg"></image>
			<image width="100%" height="100%" round class="myPhoto" src="../../static/wait.png"></image>
			<text class="myInformation">{{status}}</text>
		</view>
		<view class="middle-num"> 
			<view style="margin-left: 3%;font-weight: 900;font-size: 20px;">预定信息</view>
			<view style="display: flex;flex-direction: row;margin-top: 5px;">
				<view style="margin-left: 25px;font-size: 15px;font-weight: 500;">{{detail_msg.username}}</view>
				<!-- <view style="margin-left: 20px;">身份证号：52246546515161</view> -->
			</view>
			<view style="margin-left: 25px;font-weight: 300;">{{detail_msg.createTime}}</view>
			<view class="text_line"></view>
			<view style="display: flex;flex-direction: row;margin-top: 5px;">
				<view style="margin-left: 25px;font-size: 16px;font-weight: 500;">{{detail_msg.homestayName}}</view>
				<view style="margin-left: 20px;">联系电话：{{detail_msg.tele}}</view>
			</view>
			<image   round class="adressPhoto"  src="../../static/address.png"></image>
			<view style="margin-left: 80px;font-size: 16px;font-weight: 500;margin-bottom: 10px;">{{detail_msg.homestayaddress}}}</view>	
		</view>
		<view class="room_info">
			<view style="display: flex;">
				<div style="margin-left: 10px; margin-top: 12px;font-weight: 900;">{{RoomType}}</div>
			</view>
			<view style="display: flex;flex-direction: row;">
			<image class="room_image"  :src="`http://192.168.2.226:8086/business/common2/download?name=${detail_msg.picture}`" ></image> 
			<view class="room_name" style="margin-left: 60px;">{{detail_msg.goodsName}}</view>
			<view style="display: flex;flex-direction: column;margin-left:60px;">
				<view style="font-size: 15px;text-align: left;font-weight: 600;">
					¥ ：{{detail_msg.goodsPrice}}
				</view>
				<view style="color: rgb(145,145,145);font-size: 10px;margin-top: 30px;text-align: left;">数量：×{{detail_msg.goodsNum}}</view>
			</view>
			</view>
		</view>
		<view class="order_info">
			<view style="display: flex;">
				<div style="margin-left: 10px; margin-top: 12px;font-weight: 900;">订单信息</div>
			</view>
			<view style="display: flex;flex-direction: column;">
				<view style="margin-left: 10px;font-size: 13px;margin-top: 8px;">订单编号 :  {{detail_msg.id}} </view>
				<view style="margin-left: 10px;font-size: 13px;margin-top: 8px;">下单时间 :  {{detail_msg.createTime}}</view>
				<view style="margin-left: 10px;font-size: 13px;margin-top: 8px;">支付方式 :   微信</view>
				

			</view>
		</view>
		<view class="order_info">
			<view style="display: flex;flex-direction: column;">
				<view style="display: flex;flex-direction: row;align-items: center;">
					<view style="margin-left: 10px;font-size: 13px;margin-top: 20px;">商品总额 : </view>
					<view style="font-size: 18px;margin-top: 20px;margin-left: 170px;">{{ ((+detail_msg.goodsPrice) * (+detail_msg.goodsNum)).toFixed(2) }}</view>
				</view>
				<view style="display: flex;flex-direction: row;align-items: center;margin-top: 10px;">
					<view style="margin-left: 10px;font-size: 13px;" class="coupon-label">优惠券 : </view>
					<view style="font-size: 10px;margin-left: 170px;">{{detail_msg.couponNum}}   ×{{detail_msg.couponSubsidy}}</view>
				</view>
				<view style="display: flex;flex-direction: row;align-items: center;margin-top: 10px;">
					<view style="margin-left: 170px;font-size: 13px;">实际支付 : </view>
					<view style="font-size: 10px;margin-left: 10px;">{{(((+detail_msg.goodsPrice) * (+detail_msg.goodsNum)).toFixed(2)-((+detail_msg.couponNum) * (+detail_msg.couponSubsidy)).toFixed(2)).toFixed(2)}}</view>
				</view>
	

				
		
			</view>
		</view>
		<view class="liebiao">
			<view style="display: flex;flex-direction: column;margin-top: 10px;">
				<image src="../../static/service.png" style="width: 20px;height: 20px;margin-left: 10px;"></image>
			<view>联系客服</view>
			</view>
			<view style="display: flex;flex-direction: row;">
				<button class="complaint" @click="complaint()">点击投诉</button>
			<button class="butt">联系商家</button>
			</view>
			</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				RoomType:'',
				user_info:{
					"token":'',
					"userId":'',
					"orderStatus":'',
				},
				status: "进行中",
				detail_msg:{
				},
				OrderMsg:{
					"orderid":'',
				}
			}
		},
		 onShow() { 
			 //没次回到页面都会调用下拉刷新
			  uni.startPullDownRefresh();
		  },
		onLoad: function(option) {
			console.log(option.OrderId);
			this.OrderMsg.orderid=option.OrderId;
			this.user_info.token=uni.getStorageSync('login-user').token;
			this.GetOederMsg(option.OrderId);
		},
		methods: {
		      GetOederMsg(OrderId){
				  uni.request({
				  	url:'http://192.168.2.226:8086/business/user/getdetail',
					method:"GET",
					header:{
						'token':this.user_info.token
					},
					data:{
						'orderid':this.OrderMsg.orderid
					},
					success:(res)=> {
						this.detail_msg=res.data.data;
						switch(this.detail_msg.orderStatus){
							case 0:
							this.status="预定订单";
							break;
							case 1:
							this.status="完成订单";
							break;
							case 2:
							this.status="退款订单";
							break;
						};
						
						switch(this.detail_msg.goodsType){
							case 0:
							this.RoomType="房型信息";
							break;
							case 1:
							this.RoomType="特色信息";
							break;
						};
					
					},
					fail() {
						
					}
				  })
			  },
			  complaint(){
				  
				  uni.request({
				  	url:'http://192.168.2.226:8086/business/user/complaint/iscomplaint',
					method:'GET',
					header:{
						'token':this.user_info.token
					},
					data:{
						'orderid':this.OrderMsg.orderid
					},
					success:(res)=> {
						if(res.data.code==1)
						{
						uni.navigateTo({
							url:'/pages/order/OrderComplaint?OrderMsg='+JSON.stringify(this.detail_msg)+'&orderid=' + encodeURIComponent(this.OrderMsg.orderid)
						})
						}
						else{
						uni.showToast({
							icon:'error',
							title:'已投诉',
							duration:2000
						})
						}
					},
					fail() {

					}
				  })
				  
				  
				  
			  }
		},
	}
</script>

<style>
	page {
		background: #eaeaea;
	}

	.myContent {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		background-color: #f1f1f1;
	}

	.header {
		flex-direction: row;
		display: flex;
		height: 200rpx;
	}

	.headbgImage {
		height: 25%;
		width: 100%;
		position: absolute;
		z-index: 1;
		
	}

	.myPhoto {
		height: 120rpx;
		width: 130rpx;
		position: absolute;
		z-index: 2;
		margin-left: 30%;
		margin-top: 3%;
	}
	
	.adressPhoto {
		height: 120rpx;
		width: 130rpx;
	}

	.myPhoto1 {
		height: 50rpx;
		width: 50rpx;
		z-index: 2;

		margin-left: 85%;
		margin-top: 20px;

	}

	.myInformation {
		position: absolute;
		z-index: 2;
		margin-left: 50%;
		margin-top: 9%;
	}

	.middle-num {
		position: absolute;
		z-index: 2;
		display: flex;
		flex-wrap: nowrap;
		background: white;
		width: 95%;
		margin-left: 20rpx;
		height: 350rpx;
		border-radius: 10px;
		margin-top: -50rpx;
		flex-direction: column;
		
	}

	.oner {
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	.twoer {
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		color: #eaeaea;
	}

	.three {
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	.zier {
		font-size: 48rpx;
		color: #333333;
	}

	.zisan {
		font-size: 24rpx;
		color: #333333;
	}

	.quan {
		font-size: 24rpx;
		color: #999999;
	}

	.zi {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.room_info {
		display: flex;
		flex-wrap: nowrap;
		background: #fff;
		width: 95%;
		height: 250rpx;
		margin-left: 20rpx;
		border-radius: 10px;
		margin-top: 160px;
		flex-direction: column;
	}
	.order_info {
		display: flex;
		flex-wrap: nowrap;
		background: #fff;
		width: 95%;
		height: 260rpx;
		margin-left: 20rpx;
		border-radius: 10px;
		margin-top: 25px;
		flex-direction: column;
	}
	.order_number{
		margin-left: 60spx;
	}




	.liebiao {
		height: 120rpx;
		align-items: center;
		flex-wrap: nowrap;
		background: #fff;
		width: 91%;
		border-radius: 10px;
		flex-direction: row;
		padding: 2%;
		margin: 20rpx 20rpx 10rpx 20rpx;
	}

	.myorder-container {
		display: flex;
		justify-content: space-around;
		/* 或者 space-between, center 等 */
	}

	.myorder {
		height: 80px;

		/* 边框仅用于展示容器范围 */
		/* 		 border: 1px solid #ddd; */
		width: 80px;
		margin: 10px;

	}


	.tool {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 10px;
		width: 80px;
		height: 80px;
	}

	.tools-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.tool-image {
		width: 30px;
		height: 30px;
	}
	.text_line{
	
	/*盒子下边距，这里用来指定下划线距离文字的高度*/
	padding-bottom: 10px;
			
    /*设定一个2px，实线*/
	border-bottom: 2px solid #000000; 
	}
	.room_image{
		left: 30px;
		top: 5px;
		width: 70px;
		height: 65px;
		border-radius: 5px;
		background-color: rgba(255,255,255,1);
	}
	
	.coupon-label::after {
	  content: '\00a0\00a0\00a0\00a0'; /* 这四个\00a0是非断行空格字符 */
	}
	
	.butt{
		margin-top: -30px;
		left: 30px;
		border-radius: 20px;
		background-color: rgba(255,255,255,1);
		color: rgba(0, 0, 0, 1);
		font-size: 11px;
		text-align: center;
		font-family: Roboto;
		border: 1px solid rgba(0,0,0,1);
	}
	.complaint{
		margin-top: -30px;
		left: 100px;
		border-radius: 20px;
		background-color: rgba(255,255,255,1);
		color: rgba(0, 0, 0, 1);
		font-size: 11px;
		text-align: center;
		font-family: Roboto;
		border: 1px solid rgba(0,0,0,1);
	}
	
	
</style>